<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>登录</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../styles/login.css" />
		<style>
			* {
				margin: 0;
				padding: 0;
				font-family: 'Trebuchet MS', 'Microsoft Yahei';
			}
			
			.mui-content {
				margin-top: 40px;
			}
			
			.login-bottom {
				position: absolute;
				bottom: 10px;
				left: 0;
				right: 0;
				text-align: center;
				font-size: 20px;
			}
			
			.canvas-container {
				position: absolute;
				top: 350px;
				left: 0;
				right: 0;
				bottom: 0;
				background: url(../images/pole.png) no-repeat 112px bottom, url(../images/buliding.png)no-repeat 260px bottom;
				overflow: hidden;
			}
			
			.canvas-container #canvas {
				position: absolute;
				bottom: 22px;
				left: 30px;
			}
			
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<h1 class="mui-title">登录</h1>
		</header>
		<div class="mui-content">
			<form class="mui-input-group">
				<div class="usernameInput mui-input-row">
					<label class='usernameLabel'>用户名</label>
					<input type="text" id='username' class="mui-input-clear" placeholder="">
				</div>
				<div class="usernameInput mui-input-row">
					<label class='pwdLabel'>密码</label>
					<input type="password" id='pwd' class="mui-input-clear mui-input-password" placeholder="">
				</div>
				<div class="remmerberPwd mui-input-row mui-checkbox mui-left">
					<label class='remmerberLabel'>记住密码</label>
					<input name="remPassword" id='rempwd' type="checkbox" checked>
				</div>

				<div class="autoLogin mui-input-row">
					<label class='autoLabel'>自动登录</label>
					<div id='auto-login' class="mui-switch">
						<div class="mui-switch-handle"></div>
					</div>
				</div>
				<button type="button" id='loginBtn' class="mui-btn mui-btn-blue mui-btn-block">登录</button>
			</form>
			<div class='canvas-container'>
				<canvas id="canvas">你的浏览器还不支持Canvas?换一个吧</canvas>
			</div>
			<div class="login-bottom">
				<a href="register.html">还没有账号？注册一个吧...</a>
			</div>
		</div>
		<script src="../js/mui.min.js"></script>
		<script src='../js/md5.js'></script>
		<script type="text/javascript">
			(function($, doc) {
				$.init();
				console.log(md5);
				$.plusReady(function() {
					plus.navigator.setStatusBarBackground('#f7f7f7');
					plus.navigator.setStatusBarStyle('dark');
					doc.getElementById('username').value = plus.storage.getItem('username');
					doc.getElementById('pwd').value = plus.storage.getItem('password');
					//开关改变状态的时候
					doc.getElementById('auto-login').addEventListener('toggle', function(e) {
						if(e.detail.isActive) {
							doc.getElementById('rempwd').checked = true;
						}
					});
					//记住密码改变状态时
					doc.getElementById('rempwd').onchange = function() {
						if(!this.checked) {
							var isActive = doc.getElementById('auto-login').classList.contains('mui-active');
							if(isActive) {
								$('#auto-login').switch().toggle();
							}
						}
					}

					doc.getElementById('loginBtn').addEventListener('tap', function() {
						//1、检测用户填写表单的信息
						var usr = doc.getElementById('username').value,
							pwd = doc.getElementById('pwd').value;

						if(!usr.length) {
							$.alert('用户名不能为空', 'Error', 'Ok!', 'div');
							return false;
						}
						if(pwd.length < 3 || pwd.length > 12) {
							$.alert('密码长度为3-12位', 'Error', 'Ok!', 'div');
							return false;
						}

						//						$.post('http://plrabbit.com/Test/api.php', {
						//							username: usr,
						//							password: pwd
						//						}, function(data) {
						//							console.log(data.login);
						//							if(data.login == 'yes') {
						//								saveStorage(usr);
						//								autoLogin();
						//								plus.webview.getWebviewById('my').reload();
						//								plus.webview.close('login', 'slide-out-bottom');
						//							} else {
						//								plus.nativeUI.toast('用户名或密码错误！'); //调用原生UI
						//							}
						//						}, 'json');

						$.ajax('http://plrabbit.com/face/login.php', {
							data: {
								username: usr,
								password: md5(pwd)
							},
							type: 'post',
							dataType: 'json',
							success: function(data) {
								console.log(data.login);
								if(data.login == 'yes') {
									saveStorage(usr);
									autoLogin();
									plus.webview.getWebviewById('my').reload();
									plus.webview.close('login', 'slide-out-bottom');
								} else {
									plus.nativeUI.toast('用户名或密码错误！'); //调用原生UI
								}
							},
							timeout: 5000,
							error: function(xhr, type) {
								plus.nativeUI.toast('哎呀！网络开小差啦');
							}
						});

						//2、把用户信息存储在离线存储内
						function saveStorage(usr) {
							plus.storage.setItem('username', usr);
							var isRem = doc.getElementById('rempwd').checked;
							if(isRem) {
								//记住密码
								var pwd = doc.getElementById('pwd').value;
								plus.storage.setItem('password', pwd);
							} else {
								plus.storage.removeItem('password');
							}
						}

						//3、自动登录功能
						function autoLogin() {
							var isActive = doc.getElementById('auto-login').classList.contains('mui-active');
							if(isActive) {
								plus.storage.setItem('login', 'yes');
							} else {
								plus.storage.removeItem('login');
							}
							plus.webview.getWebviewById('my').reload();
						}
					});
				});
			})(mui, document);
		</script>
		<script>
			(function(doc) { //canvas  IE9+
				var canvas = doc.getElementById('canvas'),
					ctx = canvas.getContext('2d');
				canvas.width = 180;
				canvas.height = 180;

				//				var offCanvas=doc.createElement('canvas'),
				//					offCtx=offCanvas.getContext('2d');
				//					offCanvas.width=180;
				//					offCanvas.height=180;//图片大小

				var wheel = new Image();
				wheel.src = '../images/wheel.png';
				wheel.onload = function() { //确保图片加载完
					//画摩天轮
					requestAnimationFrame(draw); //根据屏幕刷新的频率，1s是60帧。不支持设定时间的。canvas做倒计时不推荐
				}

				function draw() {
					ctx.clearRect(0, 0, canvas.width, canvas.height); //清屏操作
					ctx.translate(90, 90);
					ctx.rotate(Math.PI / 900);
					ctx.translate(-90, -90);
					ctx.drawImage(wheel, 0, 0);
					requestAnimationFrame(draw);
				}
			})(document);
		</script>
	</body>

</html>